<template>
	<view>
		<w-picker  v-if="selectList.length!=0" mode="selector"  :defaultVal="[3]"  @confirm="onConfirm"  ref="selector"  themeColor="#f00" :selectList="selectList" ></w-picker>
		<view class="uni-padding-wrap">
			<form @submit="formSubmit">
				<view >
					<input type="text" class="uni-input" name="emp_no" @tap='showDetail' :value="pickerValue" placeholder="请选择反馈类型"></input>
					<text class="yticon icon-you un-xuan"></text> 
				</view>
				
				<view  class="un-textarea" >
					<textarea class="un-textarea1" maxlength="100" placeholder="请写下你对亿拼惠的感受，我们将认真听取您的意见，努力提供更优质的服务。" @input="conInput" v-model="contenttt" name="emp_text"></textarea>
				</view>
				
				<view class="un-em">
					<view >{{tatVal}}</view><view >/100</view>
				</view>
				
				<view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<input class="uni-input" name="contact" placeholder="手机/邮箱/QQ(选填)" />
						</view>
					</view>
				</view>
				
				<view class="un-text">
					<text>上传图片（最多6张）</text>
				</view>
				
				<!-- <view class="un-image-section">
					<view class="un-image-ite" >
						<view class="un-image-item" >
							<faicon type="image" size="20px" color="$font-color-light"></faicon>
						</view>
						<view class="un-image-item un-image-item2" >
							<faicon type="image" size="20px" color="$font-color-light"></faicon>
						</view>
						<view class="un-image-item" >
							<faicon type="image" size="20px" color="$font-color-light"></faicon>
						</view>
					</view>
					
					<view class="un-image-ite1" >
						<view class="un-image-item" >
							<faicon type="image" size="20px" color="$font-color-light"></faicon>
						</view>
						<view class="un-image-item un-image-item2" >
							<faicon type="image" size="20px" color="$font-color-light"></faicon>
						</view>
						<view class="un-image-item1" >
							<faicon type="plus" size="20px" color="$font-color-light"></faicon>
						</view>
						
					</view>
				</view> -->
				
				<view class="un-image-section">
					<view class="block" v-for="(image,index) in imageSrc" :key="index" >
						
							<view class="yticon icon-iconfontshanchu1 un-shan" @click="deleteCartItem(index)" > </view>
							<image  class="image" :src="image" :data-src="image" @tap="previewImage"></image>
						
					</view>
					
					<image src="/static/jia.png"  class="image1 " @click="chooseImage"></image>
				</view>
				
				
				<view class="uni-btn-v uni-common-mt">
					<button class="btn-submit" formType="submit" type="primary">提交</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../../common/graceChecker.js");
	export default {
		components: {
			wPicker,
		},
		
		data() {
			return {
				pickerValue: "",
				type:'',
				pickerList: [],
				defaultIndex: [],
				contenttt:'',
				tatVal: 0,
				imageSrc: [],
				mode:'',
				selectList:[
					{ label: "商品相关",value:"0" },
					{ label: "物流状况",value:"1" },
					{ label: "客户服务",value:"2" },
					{ label: "优惠活动",value:"3" },
					{ label: "产品体验",value:"4" },
					{ label: "产品功能",value:"5" },
					{ label: "其他",value:"6" }
				],
			}
		},
		onUnload() {
			this.imageSrc = [];
		},
		onLoad() {
			
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			formSubmit: function (e) {
				//将下列代码加入到对应的检查位置
				//定义表单规则
				var rule = [
					{name:"emp_no", checkType : "notnull", checkRule:"",  errorMsg:"请选择反馈类型"},
					{name:"emp_text", checkType : "notnull", checkRule:"",  errorMsg:"请填写反馈内容"}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					this.$http.post('/user/feedback',{
						SIGNATURE : uni.getStorageSync("SIGNATURE"),
						TOKEN: uni.getStorageSync("userInfo").TOKEN,
						TYPE: this.type,
						CONTEXT:formData.emp_text,
						CONTACT: formData.contact,
					}).then((res)=>{
						//判断返回内容
						if(res.data.STATE === "0" && res.statusCode === 200){
							this.upload(res.data.OBJECT)
						}else{
							uni.showToast({title:res.data.MSG, icon:"none"});
						}
					})
					.catch((err)=>{
					    console.log('request fail', err);
					})
					
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			//展示反馈类型
			showDetail(){
				this.mode='selector';
				this.$refs[this.mode].show();
			},
			//选择反馈类型
			onConfirm(val){
				console.log(val);
				this.pickerValue=val.result;
				this.type=val.defaultVal[0];
			},
			//监听输入框字数
			conInput(e){
				this.tatVal=e.detail.value.length;
				if(this.tatVal===100){
					uni.showToast({
						icon:'none',
						title:'最多只能输入100个字'
					})
				}
			},
			//删除图片
			deleteCartItem(index){
				let list = this.imageSrc;
				let row = list[index];
				let id = row.id;
				this.imageSrc.splice(index, 1);
				uni.showToast({
					title: '删除成功',
					icon: 'success',
					duration: 1000
				})
			},
			/**
			 * 预览图片
			 */
			previewImage: function(e) {
				console.log(this.imageSrc)
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageSrc
				})
			},
			/**
			 * 上传图片
			 */
			chooseImage: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						if (this.imageSrc.length < 6 ){
							this.imageSrc.push(imageSrc);
						}else{
							uni.showToast({
								title: '超出最大数目',
								icon: 'none',
								duration: 1000
							})
						}
						
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			//真正上传
			upload(FEEDBACKIMGNO){
				this.imageSrc.forEach(item=>{
					uni.uploadFile({
						url: getApp().globalData.http+'/user/fileUpload1?SIGNATURE='+
						uni.getStorageSync("SIGNATURE")+"&FEEDBACKIMGNO="+FEEDBACKIMGNO,
						filePath: item,
						fileType: 'image',
						name: 'data',
						success: (res) => {
							console.log('uploadImage success, res is:', res);
							uni.navigateBack({
								
							})
						},
						fail: (err) => {
							console.log('uploadImage fail', err);
							uni.showModal({
								content: err.errMsg,
								showCancel: false
							});
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
			background: #f5f5f5;
			position: relative;
	}
	.btn-submit{
		background-color: #E02E24;
		margin: 0upx 60upx;
	}
	/* .un-image-section{
		width: 650upx;
		margin: 10upx 60upx;
		
		.un-image-ite{
			display: flex;
			width: 100%;
			margin: 20upx 0upx;
			
			
		}
		
		.un-image-ite1{
			display: flex;
			width: 100%;
			margin-top: 20upx;
			margin-bottom: 60upx;
			
			.un-image-item1{
				width: 28%;
				height: 180upx;
				text-align: center;
				font-size: 55upx;
				background-color:#FFFFFF;
				line-height: 160upx;
				color: #CCCCCC;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(228, 228, 228, 1);
				border-radius: 0px;
			}
		}
		.un-image-item{
			width: 28%;
			height: 180upx;
			text-align: center;
			font-size: 90upx;
			background-color:rgba(242, 242, 242, 4);
			line-height: 160upx;
			color: #CCCCCC;
			border-width: 1px;
			border-style: solid;
			border-color: rgba(228, 228, 228, 1);
			border-radius: 0px;
		}
		.un-image-item2{
			margin: 0upx 40upx;
		}
	} */
	.un-text{
		font-size: 26upx;
		color: #999999;
		margin-left: 60upx;
	}
	.uni-input {
		margin: 15upx 60upx;
		height: 95upx;
		padding: 0upx 35upx;
		line-height:50upx;
		font-size:28upx;
		background:#FFF;
		flex: 1;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 228, 1);
		border-radius: 0px;
	}
	.un-xuan{
		position:absolute;
		top: 35upx;
		right: 120upx;
	}
	
	.un-textarea{
		padding:18upx 4.5%;
		line-height:1.6;
		font-size:28upx;
		height:300upx;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 228, 1);
		border-radius: 0px;
		margin: 30upx 60upx;
		background:#FFF;
	}
	.un-textarea1{
		font-size: 28upx;
	}
	.un-em{
		position: absolute;
		display: flex;
		z-index: 1;
		top: 350upx;
		right: 130upx;
		font-size: 28upx;
	}
	
	.un-image-section{
		display: flex;
		flex-wrap: wrap;
		margin: 20upx 60upx;
		.image {
			
			display: flex;
			width: 100%;
			height: 180upx;
			margin: 0upx;
			border: 2upx solid #9D9D9D;
			
		}
		
		.block{
			position: relative;
			width: 30%;
			margin: 10upx;
			.un-shan{
				position: absolute;
				top: 20upx;
				right: 20upx;
				z-index: 1;
			}
		}
		.image1{
			display: flex;
			width: 30%;
			height: 180upx;
			margin: 10upx;
			border: 2upx solid #CCCCCC;
			
		}
		
	}
	
</style>
